<!doctype html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-on="http://www.w3.org/1999/xhtml" xmlns:v-model="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>

<div id="app">

    <my-component prop-a="1" :prop-b="Number(1)" prop-d="" :prop-g="10"></my-component>

</div>


</body>
<script src="../../../vender/vue@2.4.2.js"></script>
<script>
    var myComponent={
        template:`<div>
            <div>propA:{{propA}},type:{{typeof propA}}</div>
            <div>propB:{{propB}},type:{{typeof propB}}</div>
            <div>propC:{{propC}}</div>
            <div>propD:{{propD}}</div>
            <div>propE:{{propE}}</div>
            <div>propF:{{propF}}</div>
            <div>propG:{{propG}}</div>
        </div>`,
        props:{
            propA:null,
            propB:Number,
            propC:{type:String,required:false},
            propD:{type:String,required:true},
            propE:{type:Number,default:100},
            propF:{
                type:Object,
                default: function () {
                    return {msg:'Hello'};
                }
            },
            propG:{
                type:Number,
                validator: function (val) {
                    return val>=0;
                }
            }
        }
    };

    var app=new Vue({
        el:'#app',
        components:{
            'my-component':myComponent
        }
    });


</script>
</html>